 <template>
  <div class="List">
    <list-top :playlist="state.playlist"></list-top>
    <play-list :playlist="state.playlist"></play-list>
  </div>
</template>
<script>
import { getMusicDetail } from "../api/index";
import { reactive, onMounted, onUpdated } from "vue";
import { useRoute } from "vue-router";
import listTop from "@/components/listTop.vue";
import playList from "@/components/playList.vue";
import store from '@/store/index.js';

export default {
  setup() {
    const route = useRoute();
    let state = reactive({ list: [], playlist: { creator: {}, tracks: [] } });

    onMounted(async () => {
      // console.log(route.query.id)
      let id = route.query.id;
      let res = await getMusicDetail(id);
      console.log(res);
      state.list = res.data.result;
      state.playlist = res.data.playlist;
       store.commit('setPlaylist',state.playlist.tracks)
    });
    return {
      state,
    };
  },
  components: {
    listTop,
    playList,
  },
};
</script>
<style lang="less">
</style>